<!doctype html>
<html lang="zh-CN">
 <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>年度规划项目 - 学员端</title> 
  <script src="../javascript/reload.js"></script> 
  <script src="./1968967895824203776/resource_4735110000.js"></script> 
  <link href="./1968967895824203776/all.min.css" rel="stylesheet"> 
  <script src="./1968967895824203776/echarts.min.js"></script> 
  <script>tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0E42D2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#E5E6EB',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    spacing: {
                        '220': '220px',
                        '250': '250px',
                    }
                },
            }
        }</script> 
  <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .menu-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .menu-item {
                @apply flex items-center px-4 py-3 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer;
            }
            .menu-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .submenu-item {
                @apply flex items-center px-8 py-2.5 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer text-sm;
            }
            .submenu-item-active {
                @apply bg-primary/10 text-primary;
            }
            .card-shadow {
                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-accent transition-all duration-200 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-primary/5 transition-all duration-200 flex items-center justify-center;
            }
            .btn-outline {
                @apply bg-white text-text-secondary border border-neutral-dark px-4 py-2 rounded-md hover:bg-neutral transition-all duration-200 flex items-center justify-center;
            }
            .input-field {
                @apply w-full px-3 py-2 border border-neutral-dark rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .table-header {
                @apply bg-neutral text-text-secondary text-sm font-medium px-4 py-3;
            }
            .table-row {
                @apply border-b border-neutral-dark hover:bg-neutral/50 transition-all duration-200;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .badge-success {
                @apply bg-green-100 text-green-700;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-700;
            }
            .badge-danger {
                @apply bg-red-100 text-red-700;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-700;
            }
            .badge-purple {
                @apply bg-purple-100 text-purple-700;
            }
            .badge-gray {
                @apply bg-gray-100 text-gray-700;
            }
        }
    </style> 
 </head> 
 <body class="font-inter bg-neutral text-text-primary h-screen flex overflow-hidden"> 
  <!-- 左侧菜单区域 --> 
  <aside id="sidebar" class="w-220 bg-white h-full shadow-md z-10 transition-all duration-300 ease-in-out"> 
   <!-- 品牌标识 --> 
   <div class="flex items-center justify-center h-16 border-b border-neutral-dark"> 
    <div class="flex items-center"> 
     <i class="fas fa-chart-line text-primary text-2xl mr-3"> </i> 
     <h1 class="text-xl font-bold text-primary"> Hi Quick AI </h1> 
    </div> 
   </div> 
   <!-- 菜单列表 --> 
   <nav class="py-4 h-[calc(100%-4rem)] overflow-y-auto scrollbar-hide"> 
    <div class="menu-group">
     <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1181&amp;h=762&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968264071639728128&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
      <div class="menu-item flex justify-between" data-menu="monthly" data-selectorname="#id-pe1s4" style="background-color:#ffffffff"> 
       <div class="flex items-center"> 
        <i class="fas fa-calendar-check text-lg mr-3"> </i> 
        <span class="" contenteditable="false" style="outline: none;"> 工作台 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-monthly"> 
     </div> 
    </div> 
    <!-- 公司公告 --> 
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1170&amp;h=728&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1968578812111224832&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
      <div class="menu-item flex justify-between" data-menu="announcements" data-selectorname="#id-wgtje" style="background-color:#ffffffff"> 
       <div class="flex items-center"> 
        <i class="fas fa-bullhorn text-lg mr-3"> </i> 
        <span> 公司公告 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-announcements"> 
     </div> 
    </div> 
    <!-- 年规管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="planning"> 
      <div class="flex items-center"> 
       <i class="fas fa-bullseye text-lg mr-3"> </i> 
       <span> 年规管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-planning" data-ytextravalue="extra-5vqye7kpw"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1969787710210048000&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="0" data-ytindex="0"> 
       <div class="submenu-item" data-page="goal-dashboard" data-selectorname="#id-fu447" style> 
        <i class="fas fa-chart-pie text-xs mr-2"> </i> 
        <span style> 目标进度看板 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1390&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969803110087917568&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytparentvalue="extra-5vqye7kpw" data-ytoriginindex="1" data-ytindex="1"> 
       <div class="submenu-item" data-page="performance-entry" data-selectorname="#id-zz6el" style> 
        <i class="fas fa-pencil-alt text-xs mr-2"> </i> 
        <span> 业绩回填 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967832363245240320&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="2" data-ytindex="2"> 
       <div class="submenu-item" data-page="product-library" data-selectorname="#id-o7i6w" style> 
        <i class="fas fa-box text-xs mr-2"> </i> 
        <span> 产品库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969766167933353984&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="3" data-ytindex="3"> 
       <div class="submenu-item" data-page="marketing-plan" data-selectorname="#id-yvhab" style> 
        <i class="fas fa-bullhorn text-xs mr-2"> </i> 
        <span style> 营销计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967839529905684480&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="4" data-ytindex="4"> 
       <div class="submenu-item" data-page="customer-records" data-selectorname="#id-eyl04" style> 
        <i class="fas fa-users text-xs mr-2"> </i> 
        <span style> 客户档案 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967841389332922368&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="5" data-ytindex="5"> 
       <div class="submenu-item" data-page="pk-activities" data-selectorname="#id-l6xtb" style> 
        <i class="fas fa-trophy text-xs mr-2"> </i> 
        <span> PK 活动 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 工作管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="work"> 
      <div class="flex items-center"> 
       <i class="fas fa-briefcase text-lg mr-3"> </i> 
       <span> 工作管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-work"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967843857995399168&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="work-dashboard" data-selectorname="#id-5odbl" style data-ytextravalue="extra-r73yvc9mw"> 
        <i class="fas fa-chart-bar text-xs mr-2" data-ytoriginindex="0" data-ytindex="0"> </i> 
        <span style data-ytparentvalue="extra-r73yvc9mw" data-ytoriginindex="1" data-ytindex="1"> 周日报管理 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967850301578805248&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="meeting-plan" data-selectorname="#id-uk7jx" style> 
        <i class="fas fa-calendar-alt text-xs mr-2"> </i> 
        <span style> 会议计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967852373321711616&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="work-tasks" data-selectorname="#id-e6d40" style> 
        <i class="fas fa-tasks text-xs mr-2"> </i> 
        <span> 工作任务 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 学习成长 --> 
    <div class="menu-group"> 
     <div class="menu-item menu-item-active flex justify-between" data-menu="learning"> 
      <div class="flex items-center"> 
       <i class="fas fa-graduation-cap text-lg mr-3"> </i> 
       <span> 学习成长 </span> 
      </div> 
      <i class="fas fa-chevron-down text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu" id="submenu-learning" data-ytextravalue="extra-1f77idw5g"> 
      <div class="submenu-item submenu-item-active" data-page="company-culture" data-ytoriginindex="0" data-ytindex="0"> 
       <i class="fas fa-building text-xs mr-2"> </i> 
       <span> 企业文化 </span> 
      </div> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868783729049600&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="1" data-ytindex="1"> 
       <div class="submenu-item" data-page="course-center" data-selectorname="#id-vu2di" style> 
        <i class="fas fa-book-open text-xs mr-2"> </i> 
        <span> 课程中心 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868795963834368&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="knowledge-base" data-ytparentvalue="extra-1f77idw5g" data-ytoriginindex="2" data-ytindex="2" data-selectorname="#id-6neft" style="opacity: 1;"> 
        <i class="fas fa-book text-xs mr-2"> </i> 
        <span> 知识库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868797977100288&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="learning-plan" data-ytoriginindex="3" data-ytindex="3" data-selectorname="#id-wbesp" style> 
        <i class="fas fa-clipboard-list text-xs mr-2" style> </i> 
        <span style> 学习计划 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 个人档案 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="profile"> 
      <div class="flex items-center"> 
       <i class="fas fa-user text-lg mr-3"> </i> 
       <span> 个人档案 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-profile"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868800292356096&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="basic-info" data-selectorname="#id-pkt67" style> 
        <i class="fas fa-id-card text-xs mr-2"> </i> 
        <span style> 基本信息 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868801315766272&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="account-settings" data-selectorname="#id-uiycm" style> 
        <i class="fas fa-cog text-xs mr-2"> </i> 
        <span> 账号设置 </span> 
       </div> </a> 
     </div> 
    </div> 
   </nav> 
  </aside> 
  <!-- 右侧内容区域 --> 
  <main class="flex-1 flex flex-col overflow-hidden"> 
   <!-- 顶部导航栏 --> 
   <header class="h-16 bg-white border-b border-neutral-dark flex items-center justify-between px-6 z-10"> 
    <div class="flex items-center"> 
     <button id="toggle-sidebar" class="mr-4 text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bars text-xl"> </i> </button> 
     <div class="text-sm text-text-tertiary" id="breadcrumb"> 
      <span> 学习成长 </span> 
      <i class="fas fa-angle-right mx-2 text-xs"> </i> 
      <span> 企业文化 </span> 
     </div> 
    </div> 
    <div class="flex items-center space-x-6"> 
     <div class="relative"> 
      <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-full text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64"> 
      <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"> </i> 
     </div> 
     <div class="relative"> 
      <button class="relative text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bell text-xl"> </i> <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"> </span> </button> 
     </div> 
     <div class="flex items-center cursor-pointer group"> 
      <img src="./1968967895824203776/f48e4ae6256cb09fa61d11486866b14f.png" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all duration-200"> 
      <div class="ml-2 hidden md:block"> 
       <div class="text-sm font-medium">
         张明 
       </div> 
       <div class="text-xs text-text-tertiary">
         销售部 
       </div> 
      </div> 
      <i class="fas fa-angle-down ml-1 text-text-tertiary"> </i> 
     </div> 
    </div> 
   </header> 
   <!-- 内容滚动区域 --> 
   <div class="flex-1 overflow-y-auto p-6 bg-neutral" id="content-area"> 
    <!-- 企业文化页面 --> 
    <div class="page active" id="page-company-culture"> 
     <div class="flex justify-between items-center mb-6"> 
      <h2 class="text-2xl font-bold"> 企业文化 </h2> 
      <div class="flex space-x-3"> 
       <button class="btn-outline"> <i class="fas fa-download mr-2"> </i> 下载资料 </button> 
       <button class="btn-primary"> <i class="fas fa-share-alt mr-2"> </i> 分享 </button> 
      </div> 
     </div> 
     <!-- 文化概览 --> 
     <div class="bg-white rounded-lg card-shadow p-6 mb-6" data-ytextravalue="extra-zpk62nriv"> 
      <h3 class="text-xl font-bold mb-4 flex items-center" data-ytoriginindex="0" data-ytindex="0"> <i class="fas fa-star text-yellow-500 mr-2"> </i> 文化概览 </h3> 
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6" data-ytoriginindex="1" data-ytindex="1"> 
       <div class="bg-neutral rounded-lg p-5 text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-lg"> 
        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4"> 
         <i class="fas fa-lightbulb text-2xl text-primary"> </i> 
        </div> 
        <h4 class="text-lg font-semibold mb-2"> 企业使命 </h4> 
        <p class="text-text-secondary"> 通过创新技术和卓越服务，为客户创造最大价值，推动行业进步与社会发展 </p> 
       </div> 
       <div class="bg-neutral rounded-lg p-5 text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-lg"> 
        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4"> 
         <i class="fas fa-compass text-2xl text-primary"> </i> 
        </div> 
        <h4 class="text-lg font-semibold mb-2"> 企业愿景 </h4> 
        <p class="text-text-secondary"> 成为行业领先的创新型企业，引领技术变革，打造百年品牌 </p> 
       </div> 
       <div class="bg-neutral rounded-lg p-5 text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-lg"> 
        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4"> 
         <i class="fas fa-heart text-2xl text-primary"> </i> 
        </div> 
        <h4 class="text-lg font-semibold mb-2"> 核心价值观 </h4> 
        <p class="text-text-secondary"> 诚信正直、创新进取、客户至上、合作共赢、追求卓越 </p> 
       </div> 
      </div> 
      <!-- 企业成长时间轴 --> 
      <div class="relative py-16 overflow-hidden rounded-lg bg-gray-50 border border-neutral-dark" data-ytparentvalue="extra-zpk62nriv" data-ytoriginindex="2" data-ytindex="2" data-ytextravalue="extra-pbyfv6nz3"> 
       <div class="timeline-container overflow-x-auto pb-8 px-4" data-ytparentvalue="extra-pbyfv6nz3" data-ytoriginindex="0" data-ytindex="0" style="top:-18px;position:relative"> 
        <div class="timeline flex min-w-max relative" style="top:33px"> 
         <!-- 时间轴线 --> 
         <div class="absolute top-1/2 left-0 right-0 h-0.5 bg-primary/20 transform -translate-y-1/2 z-0 border-dashed border-t-2 border-primary/30 bg-transparent"> 
         </div> 
         <!-- 时间节点1: 公司创立 --> 
         <div class="timeline-item flex-shrink-0 w-64 flex flex-col items-center relative z-10 px-4" data-ytextravalue="extra-sffpr7314" style data-ytoriginindex="1" data-ytindex="1"> 
          <div class="absolute -top-6 px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-medium shadow-md z-20" data-ytparentvalue="extra-sffpr7314" data-ytoriginindex="0" data-ytindex="0" contenteditable="false" style="opacity: 1; outline: none;">
            2015.03 
          </div> 
          <div class="w-4 h-4 rounded-full bg-orange-500 z-20 mt-2 border-4 border-white shadow-md" data-ytoriginindex="1" data-ytindex="1" style="position: relative;top:0px"> 
          </div> 
          <div class="bg-white rounded-xl shadow-lg border border-neutral-dark w-full overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 mt-4" data-ytoriginindex="2" data-ytindex="2" style> 
           <div class="h-32 overflow-hidden"> 
            <img src="./1968967895824203776/fab89ca9f70614ad0890fe819934213d.png" alt="公司创立" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" style> 
           </div> 
           <div class="p-4" data-ytextravalue="extra-gzzjtz2sn" style> 
            <h4 class="font-semibold text-lg mb-2 text-text-primary" data-ytoriginindex="0" data-ytindex="0" style> 公司创立 </h4> 
            <p class="text-sm text-text-secondary mb-3" data-ytoriginindex="1" data-ytindex="1" style> 初始投资500万，5名创始团队成员 </p> 
            <div class="flex items-center text-xs text-text-tertiary" data-ytparentvalue="extra-gzzjtz2sn" data-ytoriginindex="2" data-ytindex="2" style="opacity: 1; color: rgb(134, 144, 156); font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 400; font-style: normal; line-height: 16px; text-align: start; text-indent: 0px;"> 
             <i class="fas fa-calendar-alt mr-1"> </i> 2015年3月 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- 时间节点2: A轮融资 --> 
         <div class="timeline-item flex-shrink-0 w-64 flex flex-col items-center relative z-10 px-4" style="top:10px" data-ytextravalue="extra-2y6pw5yh6"> 
          <div class="absolute -top-6 px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-medium shadow-md z-20" data-ytparentvalue="extra-2y6pw5yh6" data-ytoriginindex="0" data-ytindex="0">
            2016.09 
          </div> 
          <div class="w-4 h-4 rounded-full bg-orange-500 z-20 mt-2 border-4 border-white shadow-md" style data-ytoriginindex="1" data-ytindex="1"> 
          </div> 
          <div class="bg-white rounded-xl shadow-lg border border-neutral-dark w-full overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 mt-4" style data-ytoriginindex="2" data-ytindex="2"> 
           <div class="h-32 overflow-hidden"> 
            <img src="./1968967895824203776/860efd77df6983ab2185a15023914f09.png" alt="A轮融资" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" style> 
           </div> 
           <div class="p-4" data-ytextravalue="extra-dw2drn632" style> 
            <h4 class="font-semibold text-lg mb-2 text-text-primary" data-ytoriginindex="0" data-ytindex="0" style> A轮融资 </h4> 
            <p class="text-sm text-text-secondary mb-3" data-ytoriginindex="1" data-ytindex="1" style> 获得红杉资本2000万投资 </p> 
            <div class="flex items-center text-xs text-text-tertiary" data-ytparentvalue="extra-dw2drn632" data-ytoriginindex="2" data-ytindex="2" style="opacity: 1; color: rgb(134, 144, 156); font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 400; font-style: normal; line-height: 16px; text-align: start; text-indent: 0px;"> 
             <i class="fas fa-calendar-alt mr-1" style> </i> 2016年9月 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- 时间节点3: 用户突破10万 --> 
         <div class="timeline-item flex-shrink-0 w-64 flex flex-col items-center relative z-10 px-4" style> 
          <div class="absolute -top-6 px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-medium shadow-md z-20">
            2017.12 
          </div> 
          <div class="w-4 h-4 rounded-full bg-orange-500 z-20 mt-2 border-4 border-white shadow-md"> 
          </div> 
          <div class="bg-white rounded-xl shadow-lg border border-neutral-dark w-full overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 mt-4" style> 
           <div class="h-32 overflow-hidden" data-ytextravalue="extra-w10i4ggkm"> 
            <img src="./1968967895824203776/14a92624701378ff1d78393f616f583d.png" alt="用户突破10万" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" data-ytparentvalue="extra-w10i4ggkm" data-ytoriginindex="0" data-ytindex="0" style="opacity: 1;"> 
           </div> 
           <div class="p-4" data-ytextravalue="extra-gyki7oyh2" style> 
            <h4 class="font-semibold text-lg mb-2 text-text-primary" data-ytoriginindex="0" data-ytindex="0" style> 用户突破10万 </h4> 
            <p class="text-sm text-text-secondary mb-3" data-ytoriginindex="1" data-ytindex="1" style> 月活跃用户达12万，营收增长300% </p> 
            <div class="flex items-center text-xs text-text-tertiary" data-ytparentvalue="extra-gyki7oyh2" data-ytoriginindex="2" data-ytindex="2" style="opacity: 1; color: rgb(134, 144, 156); font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 400; font-style: normal; line-height: 16px; text-align: start; text-indent: 0px;"> 
             <i class="fas fa-calendar-alt mr-1" style> </i> 2017年12月 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- 时间节点4: B轮融资 --> 
         <div class="timeline-item flex-shrink-0 w-64 flex flex-col items-center relative z-10 px-4" style> 
          <div class="absolute -top-6 px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-medium shadow-md z-20">
            2018.08 
          </div> 
          <div class="w-4 h-4 rounded-full bg-orange-500 z-20 mt-2 border-4 border-white shadow-md"> 
          </div> 
          <div class="bg-white rounded-xl shadow-lg border border-neutral-dark w-full overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 mt-4"> 
           <div class="h-32 overflow-hidden"> 
            <img src="./1968967895824203776/375e59e4b5d03a047894b3788df04741.png" alt="B轮融资" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" style> 
           </div> 
           <div class="p-4" data-ytextravalue="extra-1q8yzr5w5" style> 
            <h4 class="font-semibold text-lg mb-2 text-text-primary" data-ytoriginindex="0" data-ytindex="0" style> B轮融资 </h4> 
            <p class="text-sm text-text-secondary mb-3" data-ytoriginindex="1" data-ytindex="1" style> 获得IDG资本1亿投资，估值达5亿 </p> 
            <div class="flex items-center text-xs text-text-tertiary" data-ytparentvalue="extra-1q8yzr5w5" data-ytoriginindex="2" data-ytindex="2" style="opacity: 1; color: rgb(134, 144, 156); font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 400; font-style: normal; line-height: 16px; text-align: start; text-indent: 0px;"> 
             <i class="fas fa-calendar-alt mr-1"> </i> 2018年8月 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- 时间节点5: 产品矩阵形成 --> 
         <div class="timeline-item flex-shrink-0 w-64 flex flex-col items-center relative z-10 px-4" style> 
          <div class="absolute -top-6 px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-medium shadow-md z-20">
            2019.11 
          </div> 
          <div class="w-4 h-4 rounded-full bg-orange-500 z-20 mt-2 border-4 border-white shadow-md"> 
          </div> 
          <div class="bg-white rounded-xl shadow-lg border border-neutral-dark w-full overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 mt-4" style> 
           <div class="h-32 overflow-hidden"> 
            <img src="./1968967895824203776/a55ffea84421b285624fa7c3f5e7517b.png" alt="产品矩阵形成" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" style> 
           </div> 
           <div class="p-4" data-ytextravalue="extra-kzilprbx4" style> 
            <h4 class="font-semibold text-lg mb-2 text-text-primary" data-ytoriginindex="0" data-ytindex="0" style> 产品矩阵形成 </h4> 
            <p class="text-sm text-text-secondary mb-3" data-ytoriginindex="1" data-ytindex="1" style> 完成5条产品线布局，员工规模达200人 </p> 
            <div class="flex items-center text-xs text-text-tertiary" data-ytparentvalue="extra-kzilprbx4" data-ytoriginindex="2" data-ytindex="2" style="opacity: 1; color: rgb(134, 144, 156); font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 400; font-style: normal; line-height: 16px; text-align: start; text-indent: 0px;"> 
             <i class="fas fa-calendar-alt mr-1"> </i> 2019年11月 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- 时间节点6: C轮融资 --> 
         <div class="timeline-item flex-shrink-0 w-64 flex flex-col items-center relative z-10 px-4" style> 
          <div class="absolute -top-6 px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-medium shadow-md z-20">
            2020.07 
          </div> 
          <div class="w-4 h-4 rounded-full bg-orange-500 z-20 mt-2 border-4 border-white shadow-md"> 
          </div> 
          <div class="bg-white rounded-xl shadow-lg border border-neutral-dark w-full overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 mt-4"> 
           <div class="h-32 overflow-hidden"> 
            <img src="./1968967895824203776/cf5e69ac11e39ffcdadf2d72d4806c4c.png" alt="C轮融资" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> 
           </div> 
           <div class="p-4" data-ytextravalue="extra-rf0jcisr3" style> 
            <h4 class="font-semibold text-lg mb-2 text-text-primary" data-ytoriginindex="0" data-ytindex="0" style> C轮融资 </h4> 
            <p class="text-sm text-text-secondary mb-3" data-ytoriginindex="1" data-ytindex="1" style> 获得腾讯领投3亿，估值突破30亿 </p> 
            <div class="flex items-center text-xs text-text-tertiary" data-ytparentvalue="extra-rf0jcisr3" data-ytoriginindex="2" data-ytindex="2" style="opacity: 1; color: rgb(134, 144, 156); font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 400; font-style: normal; line-height: 16px; text-align: start; text-indent: 0px;"> 
             <i class="fas fa-calendar-alt mr-1"> </i> 2020年7月 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="timeline-item flex-shrink-0 w-64 flex flex-col items-center relative z-10 px-4" data-ytoriginindex="1" data-ytindex="1" style> 
          <div class="absolute -top-6 px-3 py-1 bg-green-500 text-white rounded-full text-sm font-medium shadow-md z-20" style>
            2022.05 
          </div> 
          <div class="w-4 h-4 rounded-full bg-green-500 z-20 mt-2 border-4 border-white shadow-md"> 
          </div> 
          <div class="bg-white rounded-xl shadow-lg border border-neutral-dark w-full overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 mt-4" style> 
           <div class="h-32 overflow-hidden"> 
            <img src="./1968967895824203776/2200f47cbbf05b442120cd2a96027f2a.png" alt="成功上市" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" style> 
           </div> 
           <div class="p-4" data-ytextravalue="extra-pzieypj65" style> 
            <h4 class="font-semibold text-lg mb-2 text-text-primary" data-ytoriginindex="0" data-ytindex="0"> 成功上市 </h4> 
            <p class="text-sm text-text-secondary mb-3" data-ytoriginindex="1" data-ytindex="1" style> 在科创板挂牌上市，市值达120亿 </p> 
            <div class="flex items-center text-xs text-text-tertiary" data-ytparentvalue="extra-pzieypj65" data-ytoriginindex="2" data-ytindex="0" style="opacity: 1; color: rgb(134, 144, 156); font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 400; font-style: normal; line-height: 16px; text-align: start; text-indent: 0px;"> 
             <i class="fas fa-calendar-alt mr-1"> </i> 2022年5月 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- 时间节点8: 未来展望 --> 
         <div class="timeline-item flex-shrink-0 w-64 flex flex-col items-center relative z-10 px-4"> 
          <div class="absolute -top-6 px-3 py-1 bg-purple-500 text-white rounded-full text-sm font-medium shadow-md z-20">
            未来展望 
          </div> 
          <div class="w-4 h-4 rounded-full bg-purple-500 z-20 mt-2 border-4 border-white shadow-md"> 
          </div> 
          <div class="bg-white rounded-xl shadow-lg border border-neutral-dark w-full overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 mt-4"> 
           <div class="h-32 overflow-hidden"> 
            <img src="./1968967895824203776/7e2475c3acff68a9cea1ad98a47ed426.png" alt="全球市场拓展" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> 
           </div> 
           <div class="p-4"> 
            <h4 class="font-semibold text-lg mb-2 text-text-primary"> 全球市场拓展 </h4> 
            <p class="text-sm text-text-secondary mb-3"> 计划三年内进入海外市场，实现全球化布局 </p> 
            <div class="flex items-center text-xs text-text-tertiary"> 
             <i class="fas fa-rocket mr-1"> </i> 未来规划 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <!-- 时间轴说明 --> 
       <div class="text-center mt-4 text-sm text-text-tertiary" data-ytoriginindex="1" data-ytindex="1"> 
        <p class="text-gray-600"> 拖动时间轴查看企业发展里程碑 <i class="fas fa-arrows-h ml-1 text-primary"> </i> </p> 
       </div> 
      </div> 
     </div> 
     <!-- 核心价值观 --> 
     <div class="bg-white rounded-lg card-shadow p-6 mb-6"> 
      <h3 class="text-xl font-bold mb-6 flex items-center"> <i class="fas fa-gem text-yellow-500 mr-2"> </i> 核心价值观 </h3> 
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-5"> 
       <div class="border border-neutral-dark rounded-lg p-5 hover:border-primary hover:shadow-md transition-all duration-300 group"> 
        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-white transition-colors duration-300"> 
         <i class="fas fa-handshake text-xl text-primary group-hover:text-white transition-colors duration-300"> </i> 
        </div> 
        <h4 class="text-lg font-semibold mb-2"> 诚信正直 </h4> 
        <p class="text-text-secondary text-sm"> 坚守诚信原则，言行一致，做正确的事 </p> 
       </div> 
       <div class="border border-neutral-dark rounded-lg p-5 hover:border-primary hover:shadow-md transition-all duration-300 group"> 
        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-white transition-colors duration-300"> 
         <i class="fas fa-rocket text-xl text-primary group-hover:text-white transition-colors duration-300"> </i> 
        </div> 
        <h4 class="text-lg font-semibold mb-2"> 创新进取 </h4> 
        <p class="text-text-secondary text-sm"> 勇于突破常规，持续学习，追求进步 </p> 
       </div> 
       <div class="border border-neutral-dark rounded-lg p-5 hover:border-primary hover:shadow-md transition-all duration-300 group"> 
        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-white transition-colors duration-300"> 
         <i class="fas fa-users text-xl text-primary group-hover:text-white transition-colors duration-300"> </i> 
        </div> 
        <h4 class="text-lg font-semibold mb-2"> 客户至上 </h4> 
        <p class="text-text-secondary text-sm"> 以客户需求为导向，提供超越期望的服务 </p> 
       </div> 
       <div class="border border-neutral-dark rounded-lg p-5 hover:border-primary hover:shadow-md transition-all duration-300 group"> 
        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-white transition-colors duration-300"> 
         <i class="fas fa-sitemap text-xl text-primary group-hover:text-white transition-colors duration-300"> </i> 
        </div> 
        <h4 class="text-lg font-semibold mb-2"> 合作共赢 </h4> 
        <p class="text-text-secondary text-sm"> 倡导团队协作，实现个人与集体共同发展 </p> 
       </div> 
       <div class="border border-neutral-dark rounded-lg p-5 hover:border-primary hover:shadow-md transition-all duration-300 group"> 
        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-white transition-colors duration-300"> 
         <i class="fas fa-trophy text-xl text-primary group-hover:text-white transition-colors duration-300"> </i> 
        </div> 
        <h4 class="text-lg font-semibold mb-2"> 追求卓越 </h4> 
        <p class="text-text-secondary text-sm"> 精益求精，不断挑战更高标准，创造卓越价值 </p> 
       </div> 
      </div> 
     </div> 
     <!-- 文化故事 --> 
     <div class="bg-white rounded-lg card-shadow p-6 mb-6"> 
      <h3 class="text-xl font-bold mb-6 flex items-center"> <i class="fas fa-book text-yellow-500 mr-2"> </i> 文化故事 </h3> 
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> 
       <div class="border border-neutral-dark rounded-lg overflow-hidden hover:shadow-lg transition-shadow duration-300"> 
        <div class="h-48 overflow-hidden"> 
         <img src="./1968967895824203776/0c4c5f9e51075c9a8202635b6245d93a.png" alt="客户至上的故事" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> 
        </div> 
        <div class="p-5"> 
         <div class="flex items-center mb-3"> 
          <span class="badge badge-info mr-2"> 客户至上 </span> 
          <span class="text-xs text-text-tertiary"> 2023-05-15 </span> 
         </div> 
         <h4 class="text-lg font-semibold mb-2"> 深夜的技术支持 </h4> 
         <p class="text-text-secondary text-sm mb-4 line-clamp"> 当客户系统在深夜出现紧急故障时，我们的技术团队迅速响应，通宵达旦解决问题，确保客户业务不受影响... </p> 
         <a href="javascript:void(0);" class="text-primary text-sm font-medium hover:underline flex items-center"> 阅读全文 <i class="fas fa-angle-right ml-1"> </i> </a> 
        </div> 
       </div> 
       <div class="border border-neutral-dark rounded-lg overflow-hidden hover:shadow-lg transition-shadow duration-300"> 
        <div class="h-48 overflow-hidden"> 
         <img src="./1968967895824203776/430faedc6384deb6c377ad65425ff8b3.png" alt="合作共赢的故事" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> 
        </div> 
        <div class="p-5"> 
         <div class="flex items-center mb-3"> 
          <span class="badge badge-purple mr-2"> 合作共赢 </span> 
          <span class="text-xs text-text-tertiary"> 2023-04-22 </span> 
         </div> 
         <h4 class="text-lg font-semibold mb-2"> 跨部门协作的创新项目 </h4> 
         <p class="text-text-secondary text-sm mb-4 line-clamp"> 市场部与研发部紧密合作，打破部门壁垒，仅用两个月时间就推出了备受市场欢迎的新产品... </p> 
         <a href="javascript:void(0);" class="text-primary text-sm font-medium hover:underline flex items-center"> 阅读全文 <i class="fas fa-angle-right ml-1"> </i> </a> 
        </div> 
       </div> 
      </div> 
      <div class="mt-6 text-center"> 
       <button class="btn-secondary px-6"> 查看更多文化故事 <i class="fas fa-angle-down ml-1"> </i> </button> 
      </div> 
     </div> 
     <!-- 文化活动 --> 
     <div class="bg-white rounded-lg card-shadow p-6 mb-6"> 
      <h3 class="text-xl font-bold mb-6 flex items-center"> <i class="fas fa-calendar-alt text-yellow-500 mr-2"> </i> 文化活动 </h3> 
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5"> 
       <div class="rounded-lg overflow-hidden group cursor-pointer"> 
        <div class="relative h-40 overflow-hidden"> 
         <img src="./1968967895824203776/0dfb850cc378417d801a5fb8ccd8b78c.png" alt="年会活动" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> 
         <div class="absolute top-3 left-3"> 
          <span class="badge badge-danger"> 年度活动 </span> 
         </div> 
        </div> 
        <div class="p-4 bg-neutral group-hover:bg-primary/5 transition-colors duration-300"> 
         <h4 class="font-semibold mb-1 group-hover:text-primary transition-colors duration-300"> 2023年度盛典 </h4> 
         <p class="text-xs text-text-tertiary"> 2023-12-28 · 国际会议中心 </p> 
        </div> 
       </div> 
       <div class="rounded-lg overflow-hidden group cursor-pointer"> 
        <div class="relative h-40 overflow-hidden"> 
         <img src="./1968967895824203776/e29b787a941d57c6bab9628c874c81cf.png" alt="团建活动" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> 
         <div class="absolute top-3 left-3"> 
          <span class="badge badge-success"> 季度活动 </span> 
         </div> 
        </div> 
        <div class="p-4 bg-neutral group-hover:bg-primary/5 transition-colors duration-300"> 
         <h4 class="font-semibold mb-1 group-hover:text-primary transition-colors duration-300"> 春季团队拓展 </h4> 
         <p class="text-xs text-text-tertiary"> 2023-04-15 · 青山湖景区 </p> 
        </div> 
       </div> 
       <div class="rounded-lg overflow-hidden group cursor-pointer"> 
        <div class="relative h-40 overflow-hidden"> 
         <img src="./1968967895824203776/96bfd937546851a510631eabc91eb081.png" alt="公益活动" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> 
         <div class="absolute top-3 left-3"> 
          <span class="badge badge-info"> 公益活动 </span> 
         </div> 
        </div> 
        <div class="p-4 bg-neutral group-hover:bg-primary/5 transition-colors duration-300"> 
         <h4 class="font-semibold mb-1 group-hover:text-primary transition-colors duration-300"> 爱心助学行动 </h4> 
         <p class="text-xs text-text-tertiary"> 2023-06-01 · 希望小学 </p> 
        </div> 
       </div> 
       <div class="rounded-lg overflow-hidden group cursor-pointer"> 
        <div class="relative h-40 overflow-hidden"> 
         <img src="./1968967895824203776/00e973eb785a49ce16b5858b1f741e86.png" alt="创新大赛" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> 
         <div class="absolute top-3 left-3"> 
          <span class="badge badge-warning"> 创新活动 </span> 
         </div> 
        </div> 
        <div class="p-4 bg-neutral group-hover:bg-primary/5 transition-colors duration-300"> 
         <h4 class="font-semibold mb-1 group-hover:text-primary transition-colors duration-300"> 创新思维大赛 </h4> 
         <p class="text-xs text-text-tertiary"> 2023-09-20 · 公司总部 </p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- 文化资料 --> 
     <div class="bg-white rounded-lg card-shadow p-6"> 
      <h3 class="text-xl font-bold mb-6 flex items-center"> <i class="fas fa-file-alt text-yellow-500 mr-2"> </i> 文化资料 </h3> 
      <div class="overflow-x-auto"> 
       <table class="min-w-full divide-y divide-neutral-dark"> 
        <thead> 
         <tr> 
          <th class="table-header text-left"> 资料名称 </th> 
          <th class="table-header text-left"> 类型 </th> 
          <th class="table-header text-left"> 发布日期 </th> 
          <th class="table-header text-left"> 大小 </th> 
          <th class="table-header text-left"> 下载次数 </th> 
          <th class="table-header text-left"> 操作 </th> 
         </tr> 
        </thead> 
        <tbody class="divide-y divide-neutral-dark"> 
         <tr class="table-row hover:bg-neutral/50 transition-colors duration-200"> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="flex items-center"> 
            <i class="fas fa-file-pdf text-red-500 mr-3 text-xl"> </i> 
            <div> 
             <div class="font-medium">
               企业文化手册（2023版） 
             </div> 
             <div class="text-xs text-text-tertiary mt-0.5">
               人力资源部 
             </div> 
            </div> 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-gray"> 手册 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-01-15 </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 3.2 MB </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 1,245 </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <button class="text-primary hover:text-accent mr-3" title="下载"> <i class="fas fa-download"> </i> </button> <button class="text-text-secondary hover:text-text-primary" title="预览"> <i class="fas fa-eye"> </i> </button> </td> 
         </tr> 
         <tr class="table-row hover:bg-neutral/50 transition-colors duration-200"> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="flex items-center"> 
            <i class="fas fa-file-powerpoint text-orange-500 mr-3 text-xl"> </i> 
            <div> 
             <div class="font-medium">
               核心价值观培训PPT 
             </div> 
             <div class="text-xs text-text-tertiary mt-0.5">
               企业文化部 
             </div> 
            </div> 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-warning"> PPT </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-03-22 </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 8.7 MB </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 867 </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <button class="text-primary hover:text-accent mr-3" title="下载"> <i class="fas fa-download"> </i> </button> <button class="text-text-secondary hover:text-text-primary" title="预览"> <i class="fas fa-eye"> </i> </button> </td> 
         </tr> 
         <tr class="table-row hover:bg-neutral/50 transition-colors duration-200"> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="flex items-center"> 
            <i class="fas fa-file-video text-purple-500 mr-3 text-xl"> </i> 
            <div> 
             <div class="font-medium">
               2023年度文化宣传片 
             </div> 
             <div class="text-xs text-text-tertiary mt-0.5">
               品牌部 
             </div> 
            </div> 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-purple"> 视频 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-05-10 </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 125.4 MB </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 532 </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <button class="text-primary hover:text-accent mr-3" title="下载"> <i class="fas fa-download"> </i> </button> <button class="text-text-secondary hover:text-text-primary" title="预览"> <i class="fas fa-eye"> </i> </button> </td> 
         </tr> 
         <tr class="table-row hover:bg-neutral/50 transition-colors duration-200"> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="flex items-center"> 
            <i class="fas fa-file-word text-blue-500 mr-3 text-xl"> </i> 
            <div> 
             <div class="font-medium">
               员工行为准则 
             </div> 
             <div class="text-xs text-text-tertiary mt-0.5">
               人力资源部 
             </div> 
            </div> 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-info"> 文档 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-02-05 </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 1.8 MB </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 986 </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <button class="text-primary hover:text-accent mr-3" title="下载"> <i class="fas fa-download"> </i> </button> <button class="text-text-secondary hover:text-text-primary" title="预览"> <i class="fas fa-eye"> </i> </button> </td> 
         </tr> 
         <tr class="table-row hover:bg-neutral/50 transition-colors duration-200"> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="flex items-center"> 
            <i class="fas fa-file-excel text-green-500 mr-3 text-xl"> </i> 
            <div> 
             <div class="font-medium">
               企业文化建设规划（2023-2025） 
             </div> 
             <div class="text-xs text-text-tertiary mt-0.5">
               战略规划部 
             </div> 
            </div> 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-success"> 规划 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-04-18 </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 2.5 MB </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 421 </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <button class="text-primary hover:text-accent mr-3" title="下载"> <i class="fas fa-download"> </i> </button> <button class="text-text-secondary hover:text-text-primary" title="预览"> <i class="fas fa-eye"> </i> </button> </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <!-- 分页 --> 
      <div class="px-4 py-3 flex items-center justify-between border-t border-neutral-dark mt-4"> 
       <div class="text-sm text-text-tertiary">
         显示 1 至 5 条，共 12 条记录 
       </div> 
       <div class="flex space-x-1"> 
        <button class="px-3 py-1 rounded border border-neutral-dark text-text-secondary hover:bg-neutral disabled:opacity-50 disabled:cursor-not-allowed" disabled> <i class="fas fa-angle-left"> </i> </button> 
        <button class="px-3 py-1 rounded border border-primary bg-primary text-white"> 1 </button> 
        <button class="px-3 py-1 rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> 2 </button> 
        <button class="px-3 py-1 rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> 3 </button> 
        <button class="px-3 py-1 rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> <i class="fas fa-angle-right"> </i> </button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- 其他页面内容保持不变 --> 
    <div class="page hidden" id="page-work-dashboard"> 
    </div> 
    <div class="page hidden" id="page-meeting-plan"> 
    </div> 
    <div class="page hidden" id="page-work-tasks"> 
    </div> 
    <div class="page hidden" id="page-monthly-tasks"> 
    </div> 
    <div class="page hidden" id="page-latest-announcements"> 
    </div> 
    <div class="page hidden" id="page-historical-announcements"> 
    </div> 
    <div class="page hidden" id="page-goal-dashboard"> 
    </div> 
    <div class="page hidden" id="page-performance-entry"> 
    </div> 
    <div class="page hidden" id="page-product-library"> 
    </div> 
    <div class="page hidden" id="page-marketing-plan"> 
    </div> 
    <div class="page hidden" id="page-customer-records"> 
    </div> 
    <div class="page hidden" id="page-pk-activities"> 
    </div> 
    <div class="page hidden" id="page-course-center"> 
    </div> 
    <div class="page hidden" id="page-knowledge-base"> 
    </div> 
    <div class="page hidden" id="page-learning-plan"> 
    </div> 
    <div class="page hidden" id="page-basic-info"> 
    </div> 
    <div class="page hidden" id="page-account-settings"> 
    </div> 
   </div> 
  </main> 
  <script>// 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 菜单切换功能
            const menuItems = document.querySelectorAll('.menu-item[data-menu]');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有菜单的活动状态
                    document.querySelectorAll('.menu-item').forEach(menu => { menu.classList.remove('menu-item-active'); });
                    
                    // 添加当前菜单的活动状态
                    item.classList.add('menu-item-active'); 
                    
                    const menuId = item.getAttribute('data-menu');
                    const submenu = document.getElementById(`submenu-${menuId}`);
                    const icon = item.querySelector('i:last-child');
                    
                    // 切换子菜单显示/隐藏
                    if (submenu.classList.contains('hidden')) {
                        submenu.classList.remove('hidden');
                        icon.classList.remove('fa-chevron-right');
                        icon.classList.add('fa-chevron-down');
                    } else {
                        submenu.classList.add('hidden');
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-right');
                    }
                });
            });
            
            // 子菜单切换功能
            const submenuItems = document.querySelectorAll('.submenu-item[data-page]');
            submenuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有子菜单的活动状态
                    document.querySelectorAll('.submenu-item').forEach(submenu => { submenu.classList.remove('submenu-item-active'); });
                    
                    // 添加当前子菜单的活动状态
                    item.classList.add('submenu-item-active');
                    
                    // 获取页面ID和面包屑信息
                    const pageId = item.getAttribute('data-page');
                    const parentMenu = item.closest('.submenu').id.replace('submenu-', '');
                    const parentMenuText = document.querySelector(`.menu-item[data-menu="${parentMenu}"] span`).textContent;
                    const currentMenuText = item.querySelector('span').textContent;
                    
                    // 更新面包屑
                    document.getElementById('breadcrumb').innerHTML = `



<span>${parentMenuText}</span>
  <i class="fas fa-angle-right mx-2 text-xs">
  </i>
  <span>${currentMenuText}</span>
    
    
    
  `;
                    
                    // 切换页面显示
                    document.querySelectorAll('.page').forEach(page => { page.classList.add('hidden'); });
                    document.getElementById(`page-${pageId}`).classList.remove('hidden');
                });
            });
            
            // 侧边栏切换功能
            const toggleSidebar = document.getElementById('toggle-sidebar');
            const sidebar = document.getElementById('sidebar');
            toggleSidebar.addEventListener('click', () => {
                if (sidebar.classList.contains('w-220')) {
                    sidebar.classList.remove('w-220');  
                    sidebar.classList.add('w-20');
                    // 隐藏菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.add('hidden'); });
                    document.querySelectorAll('.submenu').forEach(submenu => { submenu.classList.add('hidden'); });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.add('hidden'); });
                } else {
                    sidebar.classList.remove('w-20');
                    sidebar.classList.add('w-220');
                    // 显示菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.remove('hidden'); });
                    // 恢复之前打开的子菜单
                    document.querySelectorAll('.menu-item-active').forEach(menu => {
                        const menuId = menu.getAttribute('data-menu');
                        const submenu = document.getElementById(`submenu-${menuId}`);
                        if (submenu) { submenu.classList.remove('hidden'); }
                    });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.remove('hidden'); });
                }
            });
        });</script>  
 </body>
</html>